// 导入 Vue 构造函数
import Vue from 'vue'
// 导入 Vuex 构造函数
import Vuex from 'vuex'
// 默认导入全局getters文件
import getters from './getters'
// 导入3个子模块
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import route from './modules/route'
import tagsView from './modules/tagsView'

// 导入 vuex 数据持久化的插件
import createdPersisitedState from 'vuex-persistedstate'
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    // 注册子模块，简写
    app,
    settings,
    user,
    route,
    tagsView
  },
  getters, // 简写
  plugins: [
    // 使用让 vuex 数据持久化的插件，传入配置
    createdPersisitedState({
      // 本地存储键名 localStorage.setItem('hrsass-23',vuex下的state数据)
      key: 'hrsass - 23',
      // 哪些模块写的数据需要持久化
      // 使用这个插件的好处
      // 1.自动把vuex中的数据同步到localStorage一份
      // 2.当我们刷新页面的时候，自动把localStorage的数据赋值给vuex中的数据
      // 3.每当vuex中的数据发生变化，会自动把最新的vuex数据同步到localStorage
      // 数据的使用方式
      // 1.代码中，我们都是从vuex中获取数据进行增删改查（只用vuex中的数据）
      // 2.localStorage只负责刷新数据不丢失的任务
      paths: ['app', 'settings']
    })
  ]
})

export default store

// token为什么同时用vuex和本地存储公共管理？
// 存储在vuex中的数据的
// 好处：
//    1.响应式
//    2.读写速度快（从内存中直接读取）
// 缺点：1.刷新会丢失

// 存储在本地localstorage的数据优、缺点：互补，
// 优点：刷新不丢失
// 缺点：1.非响应式；2.读写速度慢（从磁盘中读取所以慢）

// 当刷新页面（强刷,属于清除内存，导致store初始化）时vuex存储的值会丢失
// (这也导致了vuex也不是十全十美的，强刷之后如果还要保留之前的数据就得需要配合localstorage)
// localstorage存储的数据，页面关闭后不会清除，但有个注意点就是只能保存string类型的值，
// 可数据转化JSON或者按规律存字符串
